<body onload="todolist()">
    <h1>待办事项清单</h1>
    <input type="text" placeholder="添加新事项" id="new">
    <button onclick="create()">+</button>
    <input type="text" placeholder="删除事项" id="move">
    <button onclick="del_todo()">-</button><br>
    <button class="but" onclick="todo_all()">显示所有事项</button>
    <button class="but" onclick="uncompleted_todo()">显示未完成事项</button>
    <button class="but" onclick="completed_todo()">显示已完成事项</button>
    <ul id="listbox"></ul>
    <style>
        .but{
            position: relative;
            top: 10px;
        }
    </style>
</body>
<script>
    //展示待办事项
    function todolist() {
        fetch('/todos')
            .then(response => response.json())
            .then(data => {
                document.getElementById('listbox').innerHTML = '';
                var todo = data.todos;
                for (var i = 0; i < todo.length; i++) {
                    if (!todo[i].completed) {
                        var opt = '<li><input type="checkbox" name="'+ todo[i].id +'" onchange="finish(this.name)">'
                         + todo[i].id + '. ' + todo[i].title + '</li>';
                        document.getElementById('listbox').innerHTML += opt;
                    }
                }
        })
    }
    //添加待办事项
    function create() {
        var url = "/create";
        var Title = document.getElementById('new').value;
        var headers = {
            "Content-Type": "application/x-www-form-urlencoded"
        }
        fetch(url, {
            method: 'POST',
            body: 'title=' + Title,
            headers: headers
        })
            .then(res => res.json())
            .then(function(data) {
                if ('title' in data) {
                    document.getElementById('listbox').value = '';
                    todolist();
                }
            });
    }
    //完成待办事项
    function finish(id) {
        var url="/mark_completed";
        fetch(url+"?id="+id,)

        .then(function(data) {
            if ('title' in data){
                todolist();
            }
        });
    }
    //删除待办事项
    function del_todo() {
        var url = "/delete_todo";
        var del_id = parseInt(document.getElementById('move').value);
        var headers = {
            "Content-Type": "application/x-www-form-urlencoded"
        }
        fetch(url, {
            method: 'POST',
            body: "id="+del_id,
            headers: headers
        })
        .then(function(data) {
                todolist();
        });
    }
    //显示所有事项
    function todo_all() {
        fetch('/todos')
            .then(response => response.json())
            .then(data => {
                document.getElementById('listbox').innerHTML = '';
                var todo = data.todos;
                for (var i = 0; i < todo.length; i++) {
                    var opt = '<li><input type="checkbox" name="'+ todo[i].id +'" onchange="finish(this.name)">'
                    + todo[i].id + '. ' + todo[i].title + '</li>';
                    document.getElementById('listbox').innerHTML += opt;
                }
            });
    }
    //显示未完成事项
    function uncompleted_todo() {
        fetch('/todos')
            .then(response => response.json())
            .then(data => {
                document.getElementById('listbox').innerHTML = '';
                var todo = data.todos;
                for (var i = 0; i < todo.length; i++) {
                    if (!todo[i].completed) {
                        var opt = '<li><input type="checkbox" name="'+ todo[i].id +'" onchange="finish(this.name)">'
                         + todo[i].id + '. ' + todo[i].title + '</li>';
                        document.getElementById('listbox').innerHTML += opt;
                    }

                }
            });
    }
    //显示已完成事项
    function completed_todo() {
        fetch('/todos')
            .then(response => response.json())
            .then(data => {
                document.getElementById('listbox').innerHTML = '';
                var todo = data.todos;
                for (var i = 0; i < todo.length; i++) {
                    if (todo[i].completed) {
                        var opt = '<li><input type="checkbox" name="'+ todo[i].id +'" onchange="finish(this.name)">'
                         + todo[i].id + '. ' + todo[i].title + '</li>';
                        document.getElementById('listbox').innerHTML += opt;
                    }
                }
            });
    }
</script>